<script setup lang="ts">
  import { ref } from 'vue'
  import { participateInList } from '@/api'
  const paging = ref()
  const dataList = ref()
  const loadFun = (pageNo:number, pageSize:number) => {
    participateInList().then(res => {
      res.data.map((item:any) => {
        item.responsiblePerson = JSON.parse(item.responsiblePerson)
        return item
      })
      paging.value.complete(res.data)
    }).catch(err => {
      paging.value.complete(false)
    })
  }
  const navigatorClick = (data:any) => {
    uni.navigateTo({url:data.url})
  }

</script>
<template>
  <z-paging ref="paging" class='z-paging' v-model="dataList" @query="loadFun" :loading-more-enabled='false'>
    <template #top>
      <xx-title title="参加历史"/>
    </template>
    <view class='list-box' :class="{mask: item.pubIfValidEnum == 0}" v-for='(item, index) in dataList' :key='index' @click='navigatorClick({url:`/pageSignUp/trainOrder/trainOrder?id=${item.regId}`})'>
      <view class='box-top'>
        <view class='box-top-title'>
          <view class='label'>营</view>
          {{ item.campName }}
        </view>
        <view class='box-top-body'>
          <view class='box-top-flex'>
            <view class='top-body-item'>学员姓名：{{ item.name }}</view>
            <view class='top-body-item'>所在班级：{{ item.className }}</view>
          </view>
        </view>
        <view class="box-top-user">
          <view class="box-top-user-item" v-for='(items, indx) in item.responsiblePerson' :key='indx'>
            <view class="user-item-left">
              <image :src='items.avatar[0]?.fullUrl'></image>
            </view>
            <view class="user-item-right">
              <view class="name">{{ items.coachName }}</view>
              <view class="title">{{ items.label }}</view>
            </view>
          </view>
        </view>
      </view>
      <view class='box-time'>
        <view>训练时间</view>
        <view>{{ item.plannedStartTime + '~' + item.plannedCompletionTime}}</view>
      </view>
      <view class='retirement'>
        已退营
      </view>
    </view>
  </z-paging>
</template>
<style scoped lang="scss">
  ::v-deep.z-paging-content{
    background: #F5F5F5;
  }
  .list-box{
    border-radius: 8rpx;
    width: calc(100% - 56rpx);
    margin: 0 28rpx 24rpx 28rpx;
    overflow: hidden;
    background-color: #ffffff;
    position: relative;
    .retirement{
      display: none;
    }
    &.mask{
      filter: grayscale(60%);
      .retirement{
        position: absolute;
        display: inline-block;
        top: 0;
        right: 0;
        background-color: rgb(253, 226, 226);
        color: rgb(245, 108, 108);
        font-size: 24rpx;
        padding: 6rpx 12rpx;
        border-bottom-left-radius: 8rpx;
      }
    }
    &:first-child{
      margin-top: 24rpx;
    }
    &:last-child{
      margin-right: 0;
    }
    .box-top{
      width: 100%;
      padding: 24rpx;
      background-color: #ffffff;
      .box-top-title{
        color: #21252E;
        font-size: 28rpx;
        font-weight: 500;
        margin-bottom: 4rpx;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        .label{
          display: inline-block;
          border-radius: 8rpx 8rpx 2rpx 8rpx;
          background: #65C071;
          color: #FFFFFF;
          font-size: 20rpx;
          padding: 4rpx 8rpx;
          vertical-align: top;
          font-weight: normal;
        }
      }
      .box-top-body{
        .top-body-item{
          color: #505363;
          font-size: 24rpx;
          font-weight: normal;
        }
        .box-top-flex{
          display: flex;
          .top-body-item{
            margin-right: 40rpx;
            &:last-child{
              margin-right: 0;
            }
          }
        }
      }
      .box-top-user{
        margin-top: 12rpx;
        overflow-x: auto;
        white-space: nowrap;
        .box-top-user-item{
          display: inline-block;
          margin-right: 48rpx;
          &:last-child{
            margin-right: 0;
          }
          .user-item-left{
            display: inline-block;
            width: 72rpx;
            height: 72rpx;
            border-radius: 50%;
            margin-right: 12rpx;
            box-sizing: border-box;
            border: 1px solid #ECEEF1;
            vertical-align: middle;
            overflow: hidden;
            image{
              width: 100%;
              height: 100%;
            }
          }
          .user-item-right{
            display: inline-block;
            vertical-align: middle;
            .name{
              font-size: 28rpx;
              font-weight: normal;
              color: #505363;
            }
            .title{
              font-size: 24rpx;
              font-weight: 350;
              color: #818496;
            }
          }
        }
      }
    }
    .box-time{
      background: rgba(29, 140, 170, 0.08);
      padding: 12rpx 20rpx;
      display: flex;
      justify-content: space-between;
      font-size: 24rpx;
      color: #505363;
    }
  }
</style>
